/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Animated,
  Easing,
  TextInput,
  StatusBar,
  Dimensions,
  Alert,
  AsyncStorage
} from 'react-native';
import {StackActions,NavigationActions} from 'react-navigation'

import bgImg from '../../access/imgs/bg_login.jpg';
import FontText,{fontFamily} from '../components/FontText';
import {scaleSize} from '../../utils/screen'

export default class Login extends Component {
  constructor(props){
    super(props);
    this.state = {
        email:"test@store4.fetail.com",
        password:"testtest",
        boxScale:new Animated.Value(2),
    }
  }
  componentWillMount(){
    Animated.timing(this.state.boxScale, {
        toValue: 1,
        duration:1500,
        easing:Easing.keyboard,
        useNativeDriver: true,
    }).start();
    //TODO 获取登录信息
  }
  render() {
    let {email,password} = this.state;
    return (
      <View style = {{flex:1}}>
      <StatusBar 
        barStyle="light-content"
      />
      <Animated.Image 
        style = {[styles.bgBox,{transform:[{scale:this.state.boxScale}]}]}
        source = {bgImg}>
      </Animated.Image>
      <View style={styles.container}>
        <View style = {styles.loginBox}>
            <View style = {styles.loginTitle}>
                <FontText font = {"book"} style = {styles.loginText}>Admin Login</FontText>
                <FontText font = {'light'} style = {styles.loginTime}>{new Date().formart()}</FontText>
            </View>
            <View style = {styles.inputGroup}>
                <View style = {styles.inputBox}>
                    <TextInput 
                        placeholder = {"Email"}
                        numberOfLines = {1}
                        onChangeText = {(val)=>this.valuChange(val,"email")}
                        style = {styles.inputStyle}
                        value = {email}
                        underlineColorAndroid = {'transparent'}
                        placeholderTextColor = {'#909090'}
                        clearButtonMode = {'while-editing'}
                    />
                </View>
                <View style = {styles.inputBox}>
                    <TextInput 
                        placeholder = {"Password"}
                        numberOfLines = {1}
                        value = {password}
                        password = {true}
                        onChangeText = {(val)=>this.valuChange(val,"password")}
                        style = {styles.inputStyle}
                        underlineColorAndroid = {'transparent'}
                        placeholderTextColor = {'#909090'}
                        clearButtonMode = {'while-editing'}
                    />
                </View>
                <View style = {styles.forgetPasw}>
                  <FontText font = {'light'} style = {styles.forgetText}>Forgot Password?</FontText>
                </View>
                <TouchableOpacity
                    activeOpacity = {0.8}
                    style = {styles.btnBox}
                    onPress = {()=>this.loginIn()}
                    >
                    <FontText font = {'book'} style = {styles.btnText}>SIGN IN</FontText>
                </TouchableOpacity>
            </View>
        </View>
      </View>
    </View>
    );
  }
  valuChange(val,key){
    this.setState({
        [key]:val
    })
  }
  loginIn(){
    var regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    var regPasw = /[\w]{6,18}/;
    let {email,password} = this.state;
    if(email=="" || !regEmail.test(email)) {
        Alert.alert("Fetail","Email address is invalid.");
        return;
    }
    if(password == "" || !regPasw.test(password)){
        Alert.alert("Fetail","Email address is invalid.");
        return;
    }
    this.$http.post("login",{
        email,
        password
    })
    .then((d)=>{
      console.log(d);
        if(d.status){
            global.access_token = d.access_token;
            AsyncStorage.setItem("access_token",d.access_token,(err)=>{
                if(!err){
                    this.goHome();
                }
            })
        }else{
            Alert.alert("Fetail","Email Address or password is invalid");
        }
    })
    .catch((e)=>{
      console.log(e);
        Alert.alert("Fetail","netword error！");
    })
  }
  goHome(){
    let {navigation} = this.props;
    const resetAction = StackActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({routeName: 'home'})
        ]
    });
    navigation.dispatch(resetAction);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    position: "absolute",
    left:0,
    right:0,
    bottom:0,
    top:0
  },
  bgBox:{
    flex:1,
    width:Dimensions.get('window').width,
    height:Dimensions.get('window').height
  },
  loginBox:{
      marginTop: scaleSize(170),
  },
  loginTitle:{
      justifyContent: 'center',
      alignItems: 'center',
  },
  loginText:{
      color:"#fff",
      fontSize: scaleSize(60),
  },
  loginTime:{
    color:"#fff",
    fontSize: scaleSize(36),
  },
  ltext:{
    fontSize: 20,
    color:"#464646",
    paddingRight: 18,
  },
  inputStyle:{
    fontSize: scaleSize(36),
    flex:1,
    color:"#464646",
    paddingHorizontal: scaleSize(30),
    fontFamily:fontFamily.book
  },
  forgetPasw:{
    alignItems: 'flex-end',
    height:scaleSize(100),
    justifyContent: 'center',
    textDecorationLine:"underline",
    textDecorationColor:"#fff",
    width:scaleSize(708)
  },
  forgetText:{
    fontSize: scaleSize(30),
    color:"#fff"
  },
  inputGroup:{
      marginTop: scaleSize(80),
      paddingHorizontal: 30,
      flex:1,
      alignItems: 'center',
  },
  inputBox:{
      width:scaleSize(708),
      borderBottomColor: "#f2f2f2",
      borderBottomWidth: 1,
      alignItems: 'center',
      marginTop: scaleSize(30),
      flexDirection: 'row',
      backgroundColor: "#fff",
      height:scaleSize(92),
  },
  btnBox:{
      backgroundColor: "#cfa972",
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: scaleSize(10),
      width:scaleSize(340),
      height:scaleSize(98)
  },
  btnText:{
      color:"#fff",
      fontSize: scaleSize(34),
  }
});
